<!--
 * @Describe: 组织机构下拉树选择
 * @Author: 研发中心
 * @Date: 2021-06-07 12:45:49
 * @LastEditTime: 2021-12-27 16:49:37
 * @FilePath: \AMIS8.0_WEB\src\components\STree.vue
-->
<template>
  <!-- <a-tree-select
    v-model:value="treeValue"
    :size="size"
    show-search
    allow-clear
    style="width: 100%"
    :field-names="{ children: 'children', label: fieldLabel, value: fieldValue }"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :filterTreeNode="filterTreeOption"
    :tree-data="data"
    @change="onChange"
    @select="onSelect"
    placeholder="请选择"
    :tree-default-expand-all="isExpand"
  >
  </a-tree-select> -->
  <el-tree-select
    v-model="treeValue"
    clearable
    style="width: 100%"
    :data="data"
    filterable
    check-strictly
    :props="defaultProps"
    @change="onChange"
    :default-expand-all="isExpand"
  />
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
export default defineComponent({
  props: {
    isExpand: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "default"
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label"
        };
      }
    },
    value: {
      type: [String, Number],
      default: ""
    }
  },
  emits: ["change", "update:value", "input"],
  setup(props, context) {
    const treeValue = ref(props.value);
    const onChange = (value: string | number) => {
      console.log("change", value);
      context.emit("change", value);
      context.emit("update:value", value);
    };
    return {
      treeValue,
      onChange
      // onSelect
    };
  }
});
</script>

<style scoped></style>
